
<template>
    <div>
        <el-card>
            <!-- 搜索条件 -->
            <el-row :gutter="20" style="margin-bottom: 20px;">
                <el-col :span="4">
                    <el-select v-model="alarmStatus" placeholder="报警状态">
                        <el-option v-for="item in statusOptions" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-col>
                <el-col :span="4">
                    <el-select v-model="alarmRule" placeholder="报警规则">
                        <el-option v-for="item in ruleOptions" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-col>
                <el-col :span="8">
                    <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
                        end-placeholder="结束日期" />
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="handleSearch">查询</el-button>
                    <el-button @click="handleReset">重置</el-button>
                </el-col>
            </el-row>
            <el-row justify="end">
                <el-button type="primary" @click="handleSearch"><el-icon><Setting /></el-icon>消息推送设置</el-button>
            </el-row>
            <!-- 报警列表 -->
            <el-row>
                <el-col :span="24">
                    <el-table :data="filteredAlarms" style="width: 100%">
                        <el-table-column prop="alarmId" label="报警ID"></el-table-column>
                        <el-table-column prop="area" label="报警区域"></el-table-column>
                        <el-table-column prop="time" label="报警时间"></el-table-column>
                        <el-table-column prop="rule" label="报警规则"></el-table-column>
                        <el-table-column prop="probability" label="爆管概率"></el-table-column>
                        <el-table-column prop="status" label="报警状态"></el-table-column>
                        <el-table-column label="操作">
                            <template #default="scope">
                                <el-button type="text" @click="handleDetails(scope.row)">查看详情</el-button>
                                <el-button type="text" v-if="scope.row.status === '未确认'"
                                    @click="handleConfirm(scope.row)">确认报警</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>

<script setup>
import { ref, computed } from 'vue';

// 数据和选项
const alarmStatus = ref('');
const alarmRule = ref('');
const dateRange = ref([]);
const alarms = ref([
    { alarmId: 'AL001', area: '东城区水管网A段', time: '2024-01-20 10:30:00', rule: '压力异常波动规则', probability: '85%', status: '未确认' },
    { alarmId: 'AL002', area: '西城区水管网B段', time: '2024-01-20 09:15:00', rule: '流量异常变化规则', probability: '65%', status: '已确认' },
    { alarmId: 'AL003', area: '朝阳区水管网C段', time: '2024-01-20 08:45:00', rule: '压力异常波动规则', probability: '90%', status: '未确认' }
]);

const statusOptions = [
    { value: '', label: '全部' },
    { value: '未确认', label: '未确认' },
    { value: '已确认', label: '已确认' }
];

const ruleOptions = [
    { value: '', label: '全部' },
    { value: '压力异常波动规则', label: '压力异常波动规则' },
    { value: '流量异常变化规则', label: '流量异常变化规则' }
];

// 计算属性：根据筛选条件过滤报警数据
const filteredAlarms = computed(() => {
    return alarms.value.filter(alarm => {
        const matchesStatus = !alarmStatus.value || alarm.status === alarmStatus.value;
        const matchesRule = !alarmRule.value || alarm.rule === alarmRule.value;
        // 时间范围的过滤逻辑可以根据实际需求调整
        const matchesDate = !dateRange.value.length || (new Date(alarm.time) >= new Date(dateRange.value[0]) && new Date(alarm.time) <= new Date(dateRange.value[1]));
        return matchesStatus && matchesRule && matchesDate;
    });
});

// 方法
function handleSearch() {
    // 执行查询操作
}

function handleReset() {
    alarmStatus.value = '';
    alarmRule.value = '';
    dateRange.value = [];
}

function handleDetails(alarm) {
    console.log('查看详情:', alarm);
}

function handleConfirm(alarm) {
    alarm.status = '已确认';
}
</script>

<style scoped>
.el-row {
    margin-bottom: 20px;
}
</style>